<template>
  <div>
    <Row>
      <i-col span="24" class="operation_item y_query_right">
          <Select placeholder="支付平台" v-model="tParam.platform" clearable class="y_condition" style="text-align: left;">
            <Option v-for="item in payWayDict" v-if="item.value != 110"  :value="item.value" :key="item.value">{{ item.name }}</Option>
          </Select>
        <Select placeholder="站点" v-model="tParam.siteCode" clearable class="y_condition" style="text-align: left;">
          <Option v-for="item in siteCodeDict" v-if="item.code != 13 && item.code != 30" :value="item.code" :key="item.code">{{ item.name }}</Option>
        </Select>
        <Button type="primary" icon="md-search" @click="search()" class="y_condition">查询</Button>
        <Button type="primary" icon="md-add" @click="add()"  class="y_condition">新增</Button>
      </i-col>
    </Row>

    <br/>
    <!--表格和分页-->
<!--    <Table stripe border :context="this" :columns="tTable" :data="tData.paymentAccountList" class="table_css" no-data-text="暂无数据"></Table>-->
    <List style="border-top: 1px solid #e8eaec;border-bottom: 1px solid #e8eaec;margin-top: 1rem;margin-bottom: 1rem;">
      <template v-if="tData.paymentAccountList.length == 0">
        <ListItem><div style="width: 100%; text-align: center;">暂无数据</div></ListItem>
      </template>
      <list-item class="list_item" v-for="(item,index) in tData.paymentAccountList">
        <div style="width:100%;padding: 0 0.5rem;"  >
          <Row type="flex" justify="space-between">
            <i-col flex="auto" style="text-align: left;" >
              <KeyValueView>#{{index+1}}</KeyValueView>
              <KeyValueView v-if="payWayDict.filter(i=>i.value==item.platform).length>0" title="支付平台">{{payWayDict.filter(i=>i.value==item.platform)[0].name}}</KeyValueView>
              <KeyValueView title="支付名称" >{{item.name}}</KeyValueView>
              <KeyValueView title="创建时间" >{{ $tiyBJTime(item.createtime) }}</KeyValueView>
              <KeyValueView  title="状态" >
                <Tag :color="item.state?'green':'red'">{{ item.state?'启动':'停用'}}</Tag>
              </KeyValueView>

            <span style="float: right;margin-right: 0.5rem;"><Button ghost size="small" icon="md-create" type="primary" @click="editAction(index)" >编辑</Button></span>

            </i-col>
          </Row>
        </div>
      </list-item>
    </List>
    <br/>
    <div style="float: right;">
      <Page :total="page.total" :page-size="page.stepNumber" :current="page.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[20,40,60,100]"
            show-sizer show-elevator/>
    </div>

    <!--删除确认弹出框-->
    <Modal
      v-model="tStatus.modalDelete.isShow"
      title="确认删除"
      :loading="tStatus.modalDelete.isLoading"
      @on-ok="deleteItem">
      <p>确认将该{{tStatus.modalDelete.title}}移除黑名单吗</p>
    </Modal>

    <!--新增账户-->
    <Modal
      width="48"
      v-model="tStatus.modalAdd.isShow"
      title="添加支付平台账户"
      :closable="false"
      :mask-closable="false"
      :loading="tStatus.modalAdd.isLoading"
      @on-ok="handleSubmit('formValidate')">
        <Form ref="formValidate" :model="tData.paymentAccount" :label-width="95" :rules="tStatus.ruleValidate" >
          <Row>
            <i-col span="11">
              <FormItem label="支付平台" prop="platform">
                <Select :disabled="tData.disable" v-model="tData.paymentAccount.platform" placeholder="请选择支付平台" @on-change="selectChange">
                  <Option v-for="item in payWayDict" v-if="item.value != 110" :value="item.value" :key="item.value">{{ item.name }}</Option>
                </Select>
              </FormItem>
            </i-col>
            <i-col span="1"></i-col>
            <i-col span="11">
              <FormItem label="模式" prop="mode">
                <Input v-model.trim="tData.paymentAccount.mode" placeholder="请输入模式"></Input>
              </FormItem>
            </i-col>
          </Row>

          <Row>
            <i-col span="23">
              <FormItem label="支付名称" prop="name">
                <Input  v-model.trim="tData.paymentAccount.name" type="textarea" :autosize="true" maxlength="50" placeholder="请输入支付名称"></Input>
              </FormItem>
            </i-col>
          </Row>

          <Row>
            <i-col span="23">
              <FormItem label="登录账户" prop="account">
                <Input v-model.trim="tData.paymentAccount.account" type="textarea"  :autosize="true" maxlength="100" placeholder="请输入登录账户"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="7">
              <FormItem  label="固定手续费" prop="fixedPoundage">
                <InputNumber v-model="tData.paymentAccount.fixedPoundage" :min=0 :step=1 ></InputNumber>
              </FormItem>
            </i-col>
            <i-col span="1"></i-col>
            <i-col span="7">
              <FormItem label="手续费比例" prop="poundageRate">
                <InputNumber v-model="tData.paymentAccount.poundageRate" :min=0 max=1 :step=0.1 ></InputNumber>
              </FormItem>
            </i-col>
            <i-col span="1"></i-col>
            <i-col span="7">
              <FormItem  label="状态" >
                <i-switch v-model="tData.paymentAccount.stateStatus" size="large">
                  <span slot="open">启用</span>
                  <span slot="close">停用</span>
                </i-switch>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="12">
              <FormItem  label="最小金额" prop="minPaymentAmount">
                <InputNumber v-model="tData.paymentAccount.minPaymentAmount" :min=0 :step=1 ></InputNumber>
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem label="最大金额" prop="maxPaymentAmount">
                <InputNumber v-model="tData.paymentAccount.maxPaymentAmount" :min=0  :step=1 ></InputNumber>
              </FormItem>
            </i-col>
          </Row>

          <Row>
            <i-col span="23">
              <FormItem label="站点" >
                <CheckboxGroup v-model="tData.paymentAccount.site" style="color:green;">
                  <Checkbox v-for="item in siteCodeDict" v-if="item.code != 13 && item.code != 30" :key="item.code" :label="item.code">{{item.name}}</Checkbox>
                </CheckboxGroup>
              </FormItem>
            </i-col>
          </Row>

          <Row>
            <i-col span="23">
              <FormItem v-if="braintree" label="商户id" prop="merchantId">
                <Input :disabled="tData.disable" type="textarea" :autosize="true" maxlength="200" v-model.trim="tData.paymentAccount.merchantId" placeholder="商户id"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="23">
              <FormItem v-if="braintree||stripe" label="公钥" prop="publicKey">
                <Input :disabled="tData.disable" type="textarea" :autosize="true" maxlength="200"  v-model.trim="tData.paymentAccount.publicKey" placeholder="请输入publicKey"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="23">
              <FormItem v-if="braintree" label="私钥" prop="privateKey">
                <Input :disabled="tData.disable" type="textarea" :autosize="true" maxlength="200" v-model.trim="tData.paymentAccount.privateKey" placeholder="请输入私钥"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="23">
              <FormItem v-if="paypal" label="clientId" prop="clientId">
                <Input :disabled="tData.disable" type="textarea" :autosize="true" maxlength="200" v-model.trim="tData.paymentAccount.clientId" placeholder="请输入clientId"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="23">
              <FormItem v-if="paypal" label="clientSecret" prop="clientSecret">
                <Input :disabled="tData.disable" type="textarea" :autosize="true" maxlength="200" v-model.trim="tData.paymentAccount.clientSecret" placeholder="请输入clientSecret"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="23">
              <FormItem v-if="stripe" label="clientSecret" prop="apiKey">
                <Input :disabled="tData.disable" type="textarea" :autosize="true" maxlength="200" v-model.trim="tData.paymentAccount.apiKey" placeholder="请输入clientSecret"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="23">
              <FormItem label="备注" prop="note">
                <Input v-model="tData.paymentAccount.note" type="textarea" :autosize="true" maxlength="200" show-word-limit></Input>
              </FormItem>
            </i-col>
          </Row>
        </Form>
    </Modal>
  </div>
</template>

<script>
import tiyData from "./js/paymentAcount/payment_data";
import {webList,showEdit,addItem} from "./js/paymentAcount/payment_fun";
import KeyValueView from "../widgets/KeyValueView";


export default {
  data() {
    return {
      page: tiyData.tPage,
      tParam: tiyData.tParam,
      tData: tiyData.tData,
      tTable:tiyData.tTable(this),
      tStatus:tiyData.tStatus,
      payWayDict: this.$store.getters.dictionaries.payTypeDict,
      siteCodeDict: this.$store.getters.dictionaries.siteCodeDict,
      braintree:false,
      stripe:false,
      paypal:false,
    }
  },
  components:{KeyValueView},
  methods:{
    search() {
      webList(this, tiyData);
    },
    changePage(page) {
      tiyData.tPage.currentPage = page;
      webList(this, tiyData);
    },
    sizeChange(page) {
      tiyData.tPage.stepNumber = page;
      webList(this, tiyData);
    },
    editAction(index) {
      showEdit(this, tiyData, index);
    },
    deleteItem(){
      webDelete(this, tiyData);
    },
    add(){
      this.braintree=false;
      this.stripe=false;
      this.paypal=false;
      this.tData.disable=false;
      this.tData.paymentAccount.id='';
      this.tData.paymentAccount.platform=0;
      this.tData.paymentAccount.name='';
      this.tData.paymentAccount.account='';
      this.tData.paymentAccount.mode='';
      this.tData.paymentAccount.merchantId='';
      this.tData.paymentAccount.publicKey = '';
      this.tData.paymentAccount.privateKey = '';
      this.tData.paymentAccount.clientId = '';
      this.tData.paymentAccount.clientSecret = '';
      this.tData.paymentAccount.apiKey = '';
      this.tData.paymentAccount.state = '';
      this.tData.paymentAccount.site = [];
      this.tData.paymentAccount.stateStatus= true;
      this.tData.paymentAccount.note = '';
      this.tData.paymentAccount.fixedPoundage = 0;
      this.tData.paymentAccount.poundageRate = 0;
      this.tData.paymentAccount.minPaymentAmount = 0;
      this.tData.paymentAccount.maxPaymentAmount = 9999;
      this.tStatus.modalAdd.isShow=true;
    },
    handleSubmit(name){
      addItem(this,tiyData,name);
    },
    selectChange(value){
      switch(value){
        // case 110:
        //   this.braintree=true;
        //   this.stripe=false;
        //   this.paypal=false;
        //   break;
        case 112:
        case 230: //苹果支付实际使用的是stripe
          this.braintree=false;
          this.stripe=true;
          this.paypal=false;
          break;
        case 210:
          this.braintree=true;
          this.stripe=false;
          this.paypal=false;
          break;
        case 220:
          this.braintree=false;
          this.stripe=false;
          this.paypal=true;
          break;
        case 410:
            this.braintree=false;
            this.stripe=false;
            this.paypal=false;
            break;
        case 901:
          this.braintree=false;
          this.stripe=false;
          this.paypal=false;
          break;
      }
    },
  }
}
</script>

<style lang="less" scoped>
@import  (once,optional)  "../css/base";

.list_value {
  font-size: 13px;
  color: @tiyTextDescColor;
  padding-right: 1rem;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}

.list_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list_item:hover {
  background: @tiySectionColor;
}


</style>
